// 便捷服务-商户-预约成功 
<template>
	<uni-nav-bar left-icon="left" title="预约成功" :shadow="true" :statusBar="true" backgroundColor="#e68a4b" @clickLeft="back">
	</uni-nav-bar>
	<view class="container">
		<view class="sucContainer">
			<view class="suc">预约成功</view>
		</view>
		<view class="suc1">您已预约</view>
		<view class="suc1">{{sucData.day}}</view>
		<view class="suc1">{{sucData.time}}</view>
		<view class="suc2">{{sucData.buildingName}}</view>
		<view class="suc2">({{sucData.addr}})</view>
		<view class="suc3">的<text class="suc3-text">{{sucData.serviceName}}</text>服务</view>
		<view class="suc4">请准时到店</view>
		<view class="suc5">如有冲突，无法按预约时间进行服务请在个人中心-服务订单-进行取消以免影响其他人服务</view>
	</view>
</template>

<script>
		
	export default {
		data() {
			return {
				sucData: {}
			}
		},
		onLoad(options) {
			this.sucData = JSON.parse(options.sucTip)
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,page {
		height:100%
	}
	.container {
		width: 100%;
		height: 100%;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		
		.sucContainer{
			margin-top: 80rpx;
			width: 100%;
			height: 80rpx;
			position: relative;
		}
		.suc{
			position:absolute;
			left:50%;  
			margin-left: -125rpx;
			width: 250rpx;
			height: 70rpx;
			line-height: 70rpx;
			background-color: $life-color-blue-dark;
			border-radius: 10rpx;
			color: white;
			font-weight: bold;
			font-size: $uni-font-size-lg;
		}
		.suc1 {
			margin-top: 15rpx;
			font-size: 18px;
		}
		.suc2 {
			margin-top: 15rpx;
			font-size: $uni-font-size-lg;
		}
		.suc3 {
			margin-top: 15rpx;
			font-size: 18px;
			.suc3-text {
				font-weight: bold;
			}
		}
		.suc4 {
			margin-top: 15rpx;
			font-size: 18px;
		}
		.suc5 {
			font-size: $uni-font-size-base;
			padding: 15rpx 80rpx;
		}
	}
</style>